<!--
 * @Author: 曹捷
 * @Date: 2020-12-05 17:04:44
 * @LastEditors: 曹捷
 * @LastEditTime: 2021-01-12 11:10:32
 * @Description: fileContent
-->
<template>
  <span class="add-num flex-t-c">
    <image class="numicon circle  " v-if="type === 'circle'" src="./minus_circle.svg" :class="num==min?'disable':''"
      @click.stop="prev" />
    <image class="numicon  " v-else="type === 'circle'" src="./miuns.svg" :class="num==min?'disable':''"
      @click.stop="prev" />
    <span class="num">{{num}}</span>
    <image class="numicon circle  " v-if="type === 'circle'" src="./plus_circle.svg" @click.stop="add" />
    <image class="numicon  " v-else src="./plus.svg" @click.stop="add" />
  </span>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number]
    },
    type: {
      type: String,
      default: 'circle'
    },
    min: {
      type: Number,
      default: 0
    },
    showMin: {
      type: Boolean,
      default: true
    },
    sysnValue: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    value () {
      this.num = this.value
    }
  },
  data () {
    return {
      num: this.value
    }
  },
  methods: {
    add (event) {
      event.preventDefault()
      // alert(event.type + event.touches.length)
      // console.log('🚀 ~ file: obit-add-num.vue ~ line 58 ~ add ~ event', event)
      if (event.touches.length > 1) {
        return
      }
      this.num = this.num + 1
      if (this.sysnValue) {
        this.$emit('input', this.num)
      }
      this.$emit('add')
    },
    prev (event) {
      event.preventDefault()
      if (event.touches.length > 1) {
        return
      }
      if (this.num > this.min) {
        this.num = this.num - 1
        if (this.sysnValue) {
          this.$emit('input', this.num)
        }
        this.$emit('prev')
      }
    }
  },
  mounted () {

  }
}
</script>

<style lang="scss">
.add-num {
  .num {
    width: 60rpx;
    text-align: center;
    display: inline-block;
    color: #060606;
  }
  .numicon {
    color: #686868;
    width: 44rpx;
    height: 48rpx;
    touch-action: none;
  }
  .circle {
    border-radius: 55rpx;
  }
  .disable {
    color: #d1d1d1;
  }
}
.mini-num {
  .num {
    width: 50rpx;
  }
  .numicon {
    font-size: 40rpx;
  }
}
</style>